<template>
    <div class="detail">
        <div class="top">
            <div class="back">
                <router-link to="/bangdan">
                    <van-icon name="revoke" />
                </router-link>
            </div>
            <div class="shouc">
                <van-icon name="like-o" />
            </div>
            <img :src="imgSrc" alt="">
            <div class="text">
                <div class="shum">{{obj.title}}</div>
                <span>作者:{{obj.author}}</span>
            </div>
            <p>章节列表:</p>
        </div>
        <div class="zhangjie">

            <ul>
                <li v-for="(value) in chapters" :key="value.id">
                   <router-link :to="{name: 'novel',query:{cid:value.id,sid:id}}">
                    {{value.navLabel}}
                   </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang="less">
.detail {
    padding-top: 310px;

    .top {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: turquoise;
        padding-top: 10px;
        .shouc{
            right: 10px;
            top: 10px;
            position: absolute;
            color: white;
            font-weight: bold;
            font-size: 40px;
        }
        .back{
            left: 10px;
            top: 10px;
            position: absolute;
            color: white;
            font-weight: bold;
            font-size: 40px;
        }
        img {
            display: block;
            width: 120px;
            margin: 0 auto;
            border-radius: 15px;
            margin-bottom: 10px;
        }

        .text {
            display: flex;
            padding: 0 30px;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            color: white;
            font-weight: bold;
            margin-bottom: 5px;
            .shum {
                color: black;
                font-size: 20px;
            }

            span {
                font-size: 20px;
            }
        }

        p {
            background-color: white;
            color: turquoise;
            font-weight: bold;
            font-size: 18px;
            padding: 10px;
            border-bottom: 1px solid;
        }
    }

    .zhangjie {
        padding: 0px 10px;

        ul {
            li {
                border-radius: 15px;
                padding: 15px;
                border-bottom: 5px solid #ccc;
            }
        }
    }
}
</style>
<script>
// 导入http
import http from '../api/request.js'

export default {
    data() {
        return {
            // 初始化书id
            id: '',
            obj:{},
            imgSrc:'',
            chapters:[]
        }
    },
    methods: {

        
        // 编写章节列表方法
        async listData(){
            await http.get(`/book/catalog.json?tocId=${this.id}`)
            .then(
                content=>{
                    this.chapters = content.ncx.navMap.navPoint;
                    // console.log(this.chapters[0].navLabel.slice(1));
                    for(let i =0;i<this.chapters.length;i++){
                      this.chapters[i].navLabel= this.chapters[i].navLabel.slice(1);
                    }
                    // console.log(this.chapters);
                }
            )
            .catch(
                err=>{
                    console.log("失败",err);
                    
                }
            )
        },


        // 编写书籍详情方法
        async fetchData() {
            // 编写书籍详情接口 字符串拼接添加字段
            await http.get(`/book/info.json?sourceUuid=${this.id}`)
                .then(
                    content => {
                       let list = content.data.book;
                       this.obj.id = list.bookId;
                       this.obj.cover=list.cover;
                       this.obj.title=list.title;
                       this.obj.author=list.author;
                    //    console.log(this.obj);
                       this.imgSrc=this.obj.cover;
                    //    console.log(this.imgSrc);
                       
                    }
                )
                .catch(
                    err => {
                        console.log("失败", err);

                    }
                )
        }
    },
    watch: {
        // 获取路劲携带的id
        $route: {
            immediate: true,
            handler($route) {
                this.id = $route.query.id
            }
        }
    },
    //初始化
    created() {
        this.listData();
        this.fetchData();
    }
}
</script>